<!-- 添加修改地址 -->
<template>
	<view class="address-wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<!-- 地址定位 -->
			<view class="location-item u-flex u-row-between u-p-20 u-m-b-20" @tap="getLocation">
				<view class="u-flex">
					<text v-if="!flag_big" class="u-iconfont uicon-map-fill" style="#a76f0d;"></text>
					<image v-else style="max-width: 15px;max-height: 19px;margin-right: 8px;" :src="$IMG_URL+'/static/images/BIG-icon/addressup.png'" mode=""></image>
					<text :style="{fontSize:flag_big?'18px':'14px',color:flag_big?'#ff3f00':'#a76f0d'}">{{ chooseAddress }}</text>
				</view>
				<text class="u-iconfont uicon-arrow-right" style="color: #666"></text>
			</view>

			<view class="address-box" v-if="!flag_big">
				<!-- 地址表单 -->
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="收货人:" prop="consignee">
					<u-input placeholder="请填写收货人姓名" v-model="model.consignee" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号:" prop="phone">
					<u-input placeholder="请输入收货人手机号" v-model="model.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="所在地区:" prop="area_text">
					<u-input type="select" v-model="model.area_text" :select-open="showSelect" placeholder="请选择地区" @click="showSelect = true"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label-width="150" label="详细地址:" prop="address">
					<u-input border type="textarea" v-model="model.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
				</u-form-item>
			</view>
			<view class="address-box-BIG" v-else>
				<view class="cell-address-box-BIG">
					<text class="cell-BIG-label">收货人:</text>
					<view class="cell-BIG-content"><input v-model="model.consignee"  placeholder-class="BIG-pl" type="text"  placeholder="请填写收货人姓名"></view>
				</view>
				<view class="cell-address-box-BIG">
					<text class="cell-BIG-label">手机号:</text>
					<view class="cell-BIG-content"><input  placeholder-class="BIG-pl" type="text" v-model="model.phone" placeholder="请填写收货人手机号"></view>
				</view>
				<view class="cell-address-box-BIG" style="padding-top: 0;">
					<text class="cell-BIG-label">所在地区:</text>
					<view class="cell-BIG-content" style="flex: 1;" >
						<!-- <input placeholder-class="BIG-pl" type="textarea " placeholder="请选择地区" disabled="true" v-model="model.area_text" @click="showSelect = true"> -->
						<u-input :disabled="true" @click="showSelect = true" :border="false" :custom-style="styInput" type="textarea" v-model="model.area_text" placeholder="请选择地区" />
						</view>
				</view>
				<view class="cell-address-box-BIG" style="padding-top: 0;">
					<text class="cell-BIG-label">详细地址:</text>
					<view class="cell-BIG-content" style="flex: 1;">
						<!-- <input  placeholder-class="BIG-pl" type="textarea " v-model="model.address" placeholder="请填写地址"> -->
						<u-input  :custom-style="styInput" :border="false" type="textarea" v-model="model.address" placeholder="请填写地址" />
					</view>
				</view>
			</view>
			<!-- 设置默认 -->
			<view class="default-box u-flex u-row-between">
				<text :style="{fontSize:flag_big?'18px':'14px',color:flag_big?'#000':'#303133'}" class="title">设为默认地址</text>
				<u-switch v-model="model.is_default" activeColor="#e9b461" size="40"></u-switch>
			</view>

			<!-- 功能按钮 -->
			<view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
				<button v-if="!flag_big" v-show="addressId" class=" u-m-20 u-reset-button delete-btn u-flex-1" @tap="deleteAddress">删除收货地址</button>
				<button v-if="!flag_big" class=" u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">保存收货地址</button>
				<view v-if="flag_big&&addressId" class="BIGdel" @click="deleteAddress">删除收货地址</view>
				<view v-if="flag_big" class="BIGsave" @click="submit">保存收货地址</view>
			</view>
		</u-form>

		<!-- 省市区选择器 -->
		<u-select mode="mutil-column-auto" safe-area-inset-bottom :list="addressAreaList" v-model="showSelect" @confirm="regionConfirm"></u-select>
	</view>
</template>

<script>
import { MAP_KEY } from '@/env.js';
import Auth from '@/shopro/permission/index.js';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {},
	data() {
		return {
			showSelect: false, //省市区
			addressAreaList: [],
			addressId: 0, //收货地址ID
			labelStyle: {
				'font-size': '28rpx',
				'font-weight': '600',
				color: '#595959'
			},
			labelStyleBIG: {
				'font-size': '40rpx',
				'font-weight': 'normal',
				color: '#000',
				'white-space': 'nowrap',
				'margin-right': '10px'
			},
			model: {
				id: 0,
				consignee: '',
				phone: '',
				area_text: '',
				address: '',
				is_default: false,
				latitude: '',
				longitude: ''
			},
			styInput:{
				fontSize:'17px',
				paddingLeft:'5px',
				transform: 'translateY(14px)'
			},
			rules: {
				phone: [
					{
						required: true,
						message: '请输入收货人手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				],
				consignee: [
					{
						required: true,
						message: '请填写收货人姓名',
						trigger: ['change', 'blur']
					}
				],
				area_text: [
					{
						required: true,
						message: '请选择地区',
						trigger: ['change', 'blur']
					}
				],
				address: [
					{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}
				]
			},
			errorType: ['message'],
			chooseAddress: '点击选择地理位置' //定位地址
		};
	},
	computed: {
		// 是否为大字版
		flag_big(){
			return this.$store.state.user.isBIG
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad() {
		this.getArea();
		this.addressId = this.$Route.query.id ? this.$Route.query.id : 0;
		uni.setNavigationBarTitle({
			title: this.addressId ? '编辑收货地址' : '添加收货地址'
		});
		this.addressId && this.getAddressInfo();
		// 微信导入
		this.$Route.query.addressData && this.wxAddressInit();
	},
	methods: {
		// 获取省市区
		getArea() {
			this.$http('address.area').then(res => {
				if (res.code === 1) {
					let { provinceData, cityData, areaData } = res.data;
					provinceData.forEach((item, index) => {
						this.addressAreaList.push({ ...item, children: [] });
						this.addressAreaList[index].children.push(...cityData[index]);
						this.addressAreaList[index].children.forEach((item1, index1) => {
							item1['children'] = [];
							item1.children.push(...areaData[index][index1]);
						});
					});
				}
			});
		},
		// 微信导入数据格式
		wxAddressInit() {
			let wxAddress = this.$Route.query.addressData; //微信导入
			this.model.id = 0;
			this.model.consignee = wxAddress.userName;
			this.model.phone = wxAddress.telNumber;
			// #ifdef MP-WEIXIN
			this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countyName}`;
			// #endif
			// #ifdef H5
			this.model.area_text = `${wxAddress.provinceName}-${wxAddress.cityName}-${wxAddress.countryName}`;
			// #endif
			this.model.address = wxAddress.detailInfo.replace(/%20/g, '');
			this.model.is_default = false;
		},

		// 确认省市区
		regionConfirm(e) {
			this.model.area_text = `${e[0].label}-${e[1].label}-${e[2].label}`;
		},

		// 获取定位
		async getLocation() {
			let authState = await new Auth('userLocation').check();
			// authState &&
				uni.chooseLocation({
					success: res => {
						this.model.latitude = res.latitude;
						this.model.longitude = res.longitude;
						console.log(res);
						// this.chooseAddress = res.address+res.name
						this.getLocationInfo();
						// 
					},
					fail: err => {
						console.log(err);
					}
				});
		},

		//逆坐标解析
		async getLocationInfo() {
			this.chooseAddress = '定位中...';
			const [error, res] = await uni.request({
				url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.model.longitude},${this.model.latitude}&key=${MAP_KEY}`
			});
			if (res.statusCode === 200) {
				const addressComponent = res.data.regeocode.addressComponent;
				this.chooseAddress = res.data.regeocode.formatted_address;
				this.model.area_text = `${addressComponent.province}-${addressComponent.city.length ? addressComponent.city : addressComponent.province}-${
					addressComponent.district
				}`;
				this.model.address = res.data.regeocode.formatted_address.replace(`${addressComponent.province}${addressComponent.city}${addressComponent.district}`, '');
			} else {
				console.log(res);
				console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
			}
		},

		// 提交
		submit() {
			// console.log("///");
			// this.$refs.uForm.validate(valid => {
				
			// 	valid ? this.editAddress() : console.log('验证失败');
			// });
			this.editAddress()
		},

		// 编辑添加地址
		editAddress() {
			let that = this;
			console.log('添加或编辑地址');
			that.$http(
				'address.edit',
				{
					...that.model,
					id: that.addressId
				},
				'保存中...'
			).then(res => {
				console.log(res);
				if (res.code === 1) {
					that.$Router.back();
				}
			});
		},

		// 地址信息
		getAddressInfo() {
			const that = this;
			this.$http('address.info', {
				id: that.$Route.query.id
			}).then(res => {
				if (res.code === 1) {
					let addressData = res.data;
					that.addressId = addressData.id;
					that.model.area_text = `${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
					that.model.is_default = addressData.is_default === '1' ? true : false;
					that.model.address = addressData.address;
					that.model.phone = addressData.phone;
					that.model.consignee = addressData.consignee;
				}
			});
		},

		// 删除收货地址
		deleteAddress() {
			const that = this;
			that.$http(
				'address.del',
				{
					id: that.addressId
				},
				'删除中...'
			).then(res => {
				if (res.code === 1) {
					that.$Router.back();
				}
			});
		}
	}
};
</script>

<style lang="scss">
	.BIG-pl {
		font-size: 20px;
	}
	.address-box-BIG {
		background-color: #fff;
		.cell-address-box-BIG {
			display: flex;
			align-items: center;
			padding: 14px 10px;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				display: block;
				width: 96%;
				height: 1px;
				background-color: #e5e5e5;
			}
			// border-bottom: 1px solid #e5e5e5;
			// box-sizing: border-box;
			.cell-BIG-label {
				white-space: nowrap;
				font-size: 20px;
				color: #000;
				min-width: 25%;
				
			}
			.cell-BIG-content {
				input {
					font-size: 20px;
				}
				
			}
		}
	}
	
	.BIGsave {
		background-image: linear-gradient(90deg, 
				#ff8300 0%, 
				#ff3d00 100%), 
			linear-gradient(
				#ffffff, 
				#ffffff) !important;
			background-blend-mode: normal, 
				normal !important;
			border-radius: 23px !important;
			font-size: 20px !important;
				font-weight: bold !important;
				padding: 13px 0;
				font-family: MicrosoftYaHei;
				color: #fff;
				font-stretch: normal;
				// width: 100%;
				flex: 1;
				text-align: center;
	}
	.BIGdel {
		padding: 13px 0;
		text-align: center;
		flex: 1;
		margin-right: 11px;
		background: #cfcfcf !important;
		box-shadow:unset !important;
		border-radius: 23px;
		font-size: 20px !important;
		font-weight: bold !important;
		color: #838383 !important;
	}
	
// 点击定位
.location-item {
	font-size: 28rpx;
	font-weight: 500;
	background-color: #fff;
	color: rgba(167, 111, 13, 1);
	
}

// 表单
.address-box {
	background-color: #fff;
	padding: 0 30rpx;
}
.address-item {
	height: 96rpx;
	background: #fff;
	border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
	padding: 0 25rpx;

	.item-title {
		color: #333;
		font-size: 28rpx;
		white-space: nowrap;
	}
	.inp {
		color: #333;
		font-size: 28rpx;
	}
}
.area-box {
	min-height: 120rpx;
	padding-bottom: 60rpx;
	background: #fff;
	padding: 30rpx 25rpx;
	.item-title {
		font-size: 28rpx;
		line-height: 28rpx;
		vertical-align: middle;
		white-space: nowrap;
	}
	.area-inp {
		color: #333;
		font-size: 28rpx;
		vertical-align: middle;
		margin-top: 8rpx;
		width: 550rpx;
	}
}
.default-box {
	height: 100rpx;
	padding: 0 25rpx;
	background: #fff;
	margin-top: 20rpx;
	.title {
		font-size: 28rpx;
	}
	.switch {
		transform: scale(0.8);
	}
}
// 底部按钮
.foot_box {
	.delete-btn {
		line-height: 70rpx;
		background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
		font-size: 28rpx;

		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		border-radius: 35rpx;
		padding: 0;
		margin-right: 20rpx;
	}
	.save-btn {
		line-height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		border: 1rpx solid rgba(238, 238, 238, 1);
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
	}
}
</style>
